import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import { Table, Input, Button, Modal, Select, Row, Col, Divider, Pagination, DatePicker, message, Popconfirm } from 'antd';
import styles from './index.less';
import moment from 'moment';
const { Option, OptGroup } = Select;
const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
import { TimeSpan } from '../../utils';
const Pages = ({ rehearsal, dispatch, loading }) => {
    const columns = [
        {
            title: '预案名称',
            dataIndex: 'plan_name',
        },
        {
            title: '预案种类',
            dataIndex: 'plan_types',
            render: text => text && text == '0' ? '综合应急预案' : text == '1' ? "专项应急预案" : "现场处置⽅案",
        },
        {
            title: '演练职责部门责任岗位',
            dataIndex: 'plan_department',
        },
        {
            title: '演练形式',
            dataIndex: 'practice_form',
            render: text => text && text == '1' ? "桌面演练" : "功能演练",
        },
        {
            title: '执行情况',
            dataIndex: 'state',
            sorter: (a, b) => a.state - b.state,
            render: text => {
                let object = {
                    0: '执行中',
                    1: '已经完成',
                    2: '未执行',
                    3: '申请延迟',
                };
                return <span>{object[text]}</span>;
            },
        },
        {
            title: '演练时间',
            dataIndex: 'rehearse_time',
            render: text => TimeSpan(text).substring(0, 7),
        },
        {
            title: '演练资料编号',
            dataIndex: 'material_num',
            render: (text, record) => {
                return <div>
                    {
                        text ? <a onClick={() => {
                            localStorage.setItem("id", record.id);
                            dispatch({ type: "app/goToPath", payload: 'Learningplan_list' });
                        }}>点击查看</a> : "暂无"
                    }
                </div>;
            },
        },
        {
            title: '操作',
            dataIndex: 'option',
            render: (text, record) => <div>
                <Popconfirm title="确定移除?" onCancel={() => { }} onConfirm={
                    () => dispatch({ type: "rehearsal/deleteRehearsal", payload: { id: record.id } })
                } okText="是" cancelText="否">
                    <a style={{ color: "red" }}>删除</a>
                </Popconfirm>
                <Divider type="vertical" />
                <a onClick={() => {
                    dispatch({ type: "rehearsal/save", payload: { view: true, record: record } });
                    dispatch({ type: "rehearsal/getTXL" });
                }}>修改</a>
            </div>,
        },
    ];
    return (
        <div className={styles.container}>
            <PagesGET dispatch={dispatch} {...rehearsal} loading={loading.global} />
            <Table columns={columns}
                rowKey={id => id.id}
                pagination={false}
                loading={loading.global}
                size="small"
                dataSource={rehearsal.getRehearsalData || null} />
            <Pagination current={rehearsal.pages} showTotal={total => `共计 ${total} 条`}
                style={{ float: 'right', margin: 10 }} size="small" total={rehearsal.total}
                onChange={pages => { !loading.global && dispatch({ type: 'rehearsal/save', payload: { pages: pages } }); }} />
        </div>
    );
};


class PagesGET extends React.Component {


    constructor (props) {
        super(props);
        this.state = {
            plan_name: "",
            prepare_name: "",
            plan_types: '',
            plan_department: '',
            plan_department_idADD: '',
            plan_nameADD: '',
            plan_typesADD: '',
            practice_form: '',
            prepare_name_id: '',
            rehearse_time: TimeSpan(Date.parse(new Date())),
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        this.props.dispatch({
            type: "rehearsal/getRehearsal", payload: {
                plan_name: "",
                time: "",
                plan_types: '',
                state: '',
                pageNumber: 1,
                pageSize: 10,
            },
        });
        this.props.dispatch({ type: "rehearsal/getYLBM" });
        let date = new Date;
        let year = date.getFullYear();
        let arr = [];
        for (let i = 2010; i < year + 2; i++) {
            arr.push(i);
        }
        this.setState({ timeArr: arr });
    }

    render () {

        let { pages, record, view, dispatch, getYLBMData, getTXLData, loading } = this.props;
        return (
            <div className={styles.containerit}>
                <Button type='primary' style={{ margin: '10px 0 0 10px' }} onClick={() => {
                    dispatch({ type: "rehearsal/save", payload: { view: true, record: {} } });
                    dispatch({ type: "rehearsal/getTXL" });
                    this.setState({
                        plan_department_idADD: '',
                        plan_nameADD: '',
                        plan_typesADD: '',
                        practice_form: '',
                        prepare_name_id: '',
                        rehearse_time: TimeSpan(Date.parse(new Date())),
                    });
                }}>新增演练计划</Button>
                <br />
                <Input value={this.state.plan_name || undefined} placeholder="预案名称" style={{ margin: 10, width: 200 }}
                    onChange={e => this.setState({ plan_name: e.target.value })} />
                <Select placeholder='预案种类' style={{ margin: 10, width: 200 }} value={this.state.plan_types || undefined} onChange={value => {
                    this.setState({
                        plan_types: value,
                    });
                }}>
                    <Option value="">全部</Option>
                    <Option value="0">综合应急预案</Option>
                    <Option value="1">专项应急预案</Option>
                    <Option value="2">现场处置⽅案</Option>
                </Select>

                <Select placeholder='执行情况' value={this.state.plan_department || undefined}
                    style={{ margin: 10, width: 200 }} onChange={value => {
                        this.setState({
                            plan_department: value,
                        });
                    }}>
                    <Option value="">全部</Option>
                    <Option value="0">执行中</Option>
                    <Option value="1">已经完成</Option>
                    <Option value="2">未执行</Option>
                    <Option value="3">已申请延迟</Option>
                </Select>
                <Select placeholder='请选择年份' value={this.state.prepare_name || undefined}
                    style={{ margin: 10, width: 200 }} onChange={value => {
                        this.setState({
                            prepare_name: value,
                        });
                    }}>
                    <Option value="">全部</Option>
                    {
                        this.state.timeArr && this.state.timeArr.map(item => {
                            return <Option key={item} value={item}>{item}年</Option>;
                        })
                    }
                </Select>
                <Button style={{ margin: 10 }} type='primary' onClick={() => {
                    let { plan_name, prepare_name, plan_types, plan_department } = this.state;
                    this.props.dispatch({
                        type: "rehearsal/getRehearsal", payload: {
                            plan_name: plan_name,
                            time: prepare_name,
                            plan_types: plan_types,
                            state: plan_department,
                            pageNumber: pages,
                            pageSize: 10,
                        },
                    });
                }
                }>查询</Button>
                <Button onClick={() => {
                    this.setState({
                        plan_name: '',
                        prepare_name: '',
                        plan_types: '',
                        plan_department: '',
                    });
                }}>重置</Button>
                <Modal
                    title={record.id ? "修改演练计划" : "添加演练计划"}
                    visible={view}
                    width={600}
                    confirmLoading={loading}
                    onOk={() => {
                        let { plan_department_idADD, plan_nameADD, plan_typesADD, practice_form, prepare_name_id, rehearse_time } = this.state;
                        console.log(plan_department_idADD, plan_nameADD, plan_typesADD, practice_form, prepare_name_id, rehearse_time);
                        if (plan_department_idADD && plan_nameADD && plan_typesADD && practice_form && prepare_name_id && rehearse_time) {
                            let body = {
                                plan_department_id: plan_department_idADD,
                                plan_name: plan_nameADD,
                                plan_types: plan_typesADD,
                                practice_form: practice_form,
                                prepare_name_id: prepare_name_id,
                                rehearse_time: rehearse_time,
                            };
                            if (record.id) {
                                body.id = record.id;
                            }
                            dispatch({ type: record.id ? "rehearsal/putRehearsal" : "rehearsal/postRehearsal", payload: body });
                        } else {
                            message.error('请填写完整！');
                        }
                    }}
                    onCancel={() => {
                        dispatch({ type: "rehearsal/save", payload: { view: false, record: {} } });
                    }}>
                    <Row>
                        <Col span={6}><span><span style={{ color: 'red' }}>*</span>选择角色:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.plan_department_idADD || '请选择'} style={{ width: 400, marginBottom: 10, marginTop: -4 }}
                                // mode="multiple"
                                onChange={value => {
                                    this.setState({
                                        plan_department_idADD: value,
                                    });
                                }}>
                                {getYLBMData && this.menuTreeOneFunRole(getYLBMData)}
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{ color: 'red' }}>*</span>预案名称:</span></Col>
                        <Col span={14}>
                            <Input style={{ width: 400, marginBottom: 10, marginTop: -4 }}
                                onChange={e => this.setState({ plan_nameADD: e.target.value })}
                                value={this.state.plan_nameADD}
                                placeholder="预案名称" />
                        </Col>
                        <Col span={6}><span><span style={{ color: 'red' }}>*</span>预案种类:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.plan_typesADD || '请选择'} style={{ width: 400, marginBottom: 10, marginTop: -4 }} onChange={value => {
                                this.setState({
                                    plan_typesADD: value,
                                });
                            }}>
                                <Option value="0">综合应急预案</Option>
                                <Option value="1">专项应急预案</Option>
                                <Option value="2">现场处置⽅案</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{ color: 'red' }}>*</span>演练形式:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.practice_form || "请选择"} style={{ width: 400, marginBottom: 10, marginTop: -4 }} onChange={value => {
                                this.setState({
                                    practice_form: value,
                                });
                            }}>
                                <Option value="1">桌面演练</Option>
                                <Option value="2">功能演练</Option>
                            </Select>
                        </Col>
                        <Col span={6}><span><span style={{ color: 'red' }}>*</span>编制人:</span></Col>
                        <Col span={14}>
                            <Select value={this.state.prepare_name_id || '请选择'} style={{ width: 400, marginBottom: 10, marginTop: -4 }}
                                // mode="multiple"
                                onChange={value => {
                                    this.setState({
                                        prepare_name_id: value,
                                    });
                                }}>
                                {getTXLData && getTXLData.map(item => {
                                    return <Option key={item.id} value={item.id}>{item.name}</Option>;
                                })}
                            </Select>
                        </Col>

                        <Col span={6}><span><span style={{ color: 'red' }}>*</span>计划演练时间:</span></Col>
                        <Col span={14}>
                            <MonthPicker value={moment(this.state.rehearse_time, 'YYYY/MM/DD')}
                                onChange={(date, dateString) => {
                                    this.setState({
                                        rehearse_time: dateString,
                                    });
                                }} />
                        </Col>
                    </Row>
                </Modal>
            </div>
        );
    }

    //角色树
    menuTreeOneFunRole (arr) {
        return arr.map(item => {
            if ((item.orgList && item.orgList.length > 0) || (item.roleList && item.roleList.length > 0)) {
                return <OptGroup key={item.id} label={item.s_name}>
                    {this.menuTreeOneFunRole(item.roleList)}{this.menuTreeOneFunRole(item.orgList)}
                </OptGroup>;
            }
            return <Option disabled={item.rolr_name ? false : true}
                key={item.id} value={item.id}>{item.s_name || item.rolr_name}</Option>;
        });
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.record.id !== this.props.record.id) {
            let { plan_department_id, plan_name, plan_types, practice_form, prepare_name_id, rehearse_time } = nextProps.record;
            this.setState({
                plan_department_idADD: plan_department_id,
                plan_nameADD: plan_name,
                plan_typesADD: plan_types,
                practice_form: practice_form,
                prepare_name_id: prepare_name_id,
                rehearse_time: TimeSpan(rehearse_time),
            });
        }
        if (nextProps.pages !== this.props.pages) {
            let { plan_name, prepare_name, plan_types, plan_department } = this.state;
            this.props.dispatch({
                type: "rehearsal/getRehearsal", payload: {
                    plan_name: plan_name,
                    time: prepare_name,
                    plan_types: plan_types,
                    state: plan_department,
                    pageNumber: nextProps.pages == 0 ? 1 : nextProps.pages,
                    pageSize: 10,
                },
            });
        }
    }
}

Pages.propTypes = {
    rehearsal: PropTypes.object,
    loading: PropTypes.object,
    dispatch: PropTypes.func,
};

export default connect(({ rehearsal, loading }) => ({ rehearsal, loading }))(Pages);
